<template>
	<div class="alertBox couponCount">
		<div class="alertBk"></div>
		<div class="wordBox">
			<div class="alertHead">
				<p class="tittle" v-if="showTittle == 1">使用数量详情</p>
				<p class="tittle" v-else-if="showTittle == 2">使用金额详情</p>
				<div class="myClose" @click="closeCouponUse">
					<img src="~_assets/close.png" class="myClose"/>
				</div>
			</div>
			<div class="alertBody">
        <div class="playBox">
            <div class="butInfoMes alertExport" @click="exportCouponUse">导出</div>
        </div>
				<div class="changeDiv">
					<bootstrap-table :my_columns="my_columns" :my_data="data1" :my_options="my_options" ref="table1"></bootstrap-table>
				</div>
				<div class="alertBut">
					<button class="isFalse" @click="closeCouponUse">取消</button>
					<!-- <button class="isTrue">确认</button> -->
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { USED_COUPON_DETAIL, USED_COUPON_DETAIL_EXPORT } from "@/config/url";
import { publicVM } from "_config/public.js";
export default {
  mixins: [publicVM],
  props: ["showTittle", "items"],
  mounted() {
    this.detailList();
  },
  data() {
    return {
      my_columns: [
        {
          title: "序号",
          field: "",
          formatter: function(value, row, index) {
            return index + 1;
          }
        },
        {
          title: "会员手机号",
          field: "phone_num"
        },
        {
          title: "优惠金额(元)",
          field: "money"
        },
        {
          title: "使用阀值(元)",
          field: "cost_money"
        },
        {
          title: "使用时段",
          field: "used_timestamp"
        },
        {
          title: "领取日期",
          field: "start_time"
        },
        {
          title: "结束日期",
          field: "end_time"
        },
        {
          title: "使用时间",
          field: "use_time"
        },
        {
          title: "订单编号",
          field: "bill_code"
        },
        {
          title: "使用状态",
          field: "status"
        }
      ],
      data1: [],
      page: 1,
      size: 10,
      my_options: {
        pagination: true
        // sidePagination:'server'
      },
      config: {
        checkbox_rows: true,
        rows_selectable: true,
        card_title: "Vue Bootsrap 4 advanced table"
      }
    };
  },
  methods: {
    closeCouponUse() {
      this.$emit("closeCouponUse");
    },
    detailList() {
      this.my_options = {
        pagination: true,
        sidePagination: "server",
        url: USED_COUPON_DETAIL,
        queryParams: this.getParams
      };
    },
    getParams() {
      let param = {
        memId: this.items.mem_id,
        activityCode: this.items.activity_code,
        page: this.$refs.table1.local.options.pageNumber,
        size: this.$refs.table1.local.options.pageSize
      };
      return param;
    },
    // 导出
    exportCouponUse() {
      this.tableExport(
        USED_COUPON_DETAIL_EXPORT +
          "?memId=" +
          this.items.mem_id +
          "&activityCode=" +
          this.items.activity_code
      );
    }
  }
};
</script>

<style lang="less">
.couponCount {
  .wordBox {
    width: 80%;
  }
  .alertBody,
  .bootstrap-table {
    padding-top: 0;
  }
  .changeDiv {
    width: 98%;
  }
}
</style>